<template>
	<view>
		<up-popup :show="show" @close="close" @open="open" mode="center" :round="5">
			<view class="pop-style" style="display: flex;">
				<view>
					<image src="/static/logo/dpl.png" class="icon-style"></image>
				</view>
				<view style="margin-left: 0.4rem;">
					<text>{{title}}</text>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, watch } from "vue";
	import { useCommonStore } from "../stores/useCommonStore";
	import { string } from "../uni_modules/uview-plus/libs/function/test";
	onMounted(() => {

	});
	// 定义接收的 props
	const props = defineProps({
		isShow: {
			type: Boolean,
			required: true // 必填项
		},
		title: {
			type: String,
			required: true // 必填项
		}
	});

	// 定义 emit
	const emit = defineEmits(['update:isShow', 'update:title','close', 'open']);

	// 创建响应式数据
	const show = ref<boolean>(props.isShow);
	const title = ref<string>(props.title)
	let autoCloseTimer = null;
	// 监听 props.isShow 的变化并同步到本地的 show
	watch(() => props.isShow, (newVal) => {
		show.value = newVal;
	});

	// 监听 show 的变化并同步到父组件
	watch(show, (newVal) => {
		emit('update:isShow', newVal);
	});
	// 监听 props.isShow 的变化并同步到本地的 show
	watch(() => props.title, (newVal) => {
		title.value = newVal;
	});
	
	// 监听 title 的变化并同步到父组件
	watch(title, (newVal) => {
		emit('update:title', newVal);
	});
	// 定义方法  
	function open() {
		// 清除已有的定时器，避免多次快速调用open时的冲突
		if (autoCloseTimer) {
			clearTimeout(autoCloseTimer);
			autoCloseTimer = null;
		}

		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
		autoCloseTimer = setTimeout(() => {
			show.value = false; // 关闭弹窗
			title.value = ""
		}, 2000); // 2秒后自动关闭
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		title.value = ""

		// 确保定时器也被清理
		if (autoCloseTimer) {
			clearTimeout(autoCloseTimer);
			autoCloseTimer = null;
		}
	}
</script>

<style lang="scss" scoped>
	.pop-style {
		min-width: 10rem;
		padding: 0.8rem;
		height: 3rem;
		line-height: 3rem;
	}

	.icon-style {
		width: 3rem;
		height: 3rem;
	}
</style>